<template>
	<view
		v-if="userKfInfo && Object.keys(userKfInfo).length > 0&&(userKfInfo.kf_img||userKfInfo.kf_name||userKfInfo.kf_wx_phone||userKfInfo.kf_wx_qy_url)"
		class="card"
		:style="
			'padding-top:' +
				paddingTopBt +
				'rpx' +
				';' +
				'padding-bottom:' +
				paddingTopBt +
				'rpx' +
				';' +
				'padding-left:' +
				paddingLR +
				'rpx' +
				';' +
				'padding-right:' +
				paddingLR +
				'rpx' +
				';' +
				'border-radius:' +
				radius +
				'rpx' +
				';' +
				'margin-top:' +
				marginTop +
				'rpx' +
				';'
		"
	>
		<view class="flex align-center pt30">
			<u-avatar :size="80" :src="userKfInfo.kf_img" v-if="userKfInfo.kf_img"></u-avatar>
			<view class="ml24">
				<view>
					<view style="font-weight: bold;">{{ '我的客服：' + userKfInfo.kf_name }}</view>
				</view>
				<view class="flex align-center mt10">
					<view @tap="openQr(userKfInfo.kf_wx_qy_img)" class="radius-btn  flex align-center justify-center mr20">
						<image src="/static/mine/user.png" mode="widthFix"></image>
						<text>添加好友</text>
					</view>
					<!-- 花易贝显示在线咨询 -->
					<view v-if="appid=='wxe32f11c06e50c706'" @tap="serviceChat(userKfInfo.kf_wx_qy_url)" class="radius-btn flex align-center justify-center">
						<image src="/static/mine/wechat.png" mode="widthFix"></image>
						<text>在线咨询</text>
					</view>
					<!-- 其他平台显示电话 -->
					<view v-else-if="userInfo.kf_wx_phone"  @tap="callphone(userKfInfo.kf_wx_phone)" class="radius-btn flex align-center justify-center">
						<image src="/static/mine/tel.png" mode="widthFix"></image>
						<text>{{userInfo.kf_wx_phone}}</text>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	name: 'myassistant',
	props: {
		paddingTopBt: {
			type: [Number, String],
			default: 24
		},
		paddingLR: {
			type: [Number, String],
			default: 24
		},
		radius: {
			type: [Number, String],
			default: 12
		},
		marginTop: {
			type: [Number, String],
			default: 20
		}
	},
	data: function() {
		return {appid:''};
	},
	computed: {
		...mapState(['kf_info', 'userInfo']),
		userKfInfo() {
			return this.kf_info && this.kf_info.kf_name ? this.kf_info : this.userInfo;
		}
	},
	created() {
		this.appid = uni.getAccountInfoSync().miniProgram.appId;
	},
	methods: {
		serviceChat(url) {
			wx.openCustomerServiceChat({
				extInfo: { url },
				corpId: 'ww61fcd8b5863a529a',
				success(res) {
					console.log('zhel');
				},
				fail(res) {
					console.log(res);
				}
			});
		},
		openQr(img) {
			wx.previewImage({
				current: img, // 当前显示图片的http链接
				urls: [img] // 需要预览的图片http链接列表
			});
		},
		callphone(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber: phoneNumber
			});
		},
	}
};
</script>

<style lang="scss">
.card {
	color: #1c1c1e;
	font-size: 26upx;
	line-height: 37upx;
}
.radius-btn {
	min-width: 170upx;
	height: 44upx;
	padding: 0 10upx;
	background: #fff0f1;
	border-radius: 22upx;
	font-size: 24upx;
	image {
		width: 24upx;
		height: 24upx;
		display: block;
		margin-right: 9upx;
	}
	& + .radius-btn {
		background: #e9ffef;
	}
}
</style>
